<template>
	<div class="padding-container">
		<!-- 搜索栏 -->
		<el-card class="search">
			<!-- 使用el布局 -->
			<el-row>
				<!-- 左侧搜索信息占80% -->
				<el-col :span="20">
					<el-col :span="8">
						<div class="search_grop">
							搜索名：
							<el-input placeholder="请输入内容" prefix-icon="el-icon-search" @clear="clearSearch" clearable
								v-model="searchModel.name" size="medium">
							</el-input>
						</div>
					</el-col>
				</el-col>
				<!-- 左侧搜索栏按钮占20% -->
				<el-col :span="4">
					<el-col :span="12">
						<div>
							<el-button type="primary" v-waves plain size="medium" @click="search">搜索</el-button>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-button type="success" plain size="medium" @click="openEdit(null)">添加</el-button>
						</div>
					</el-col>
				</el-col>
			</el-row>
		</el-card>
		<!-- 显示栏 -->
		<el-card class="tables">
			<el-table height="430" :data="tableData" style="width: 100%" v-loading="tableLoading">
				<el-table-column type="index" label="#" width="80">
					<template slot-scope="scope">
						{{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="150" align="center">
				</el-table-column>
				<el-table-column prop="description" label="描述" width="300" align="center">
				</el-table-column>
				<el-table-column prop="address" label="地址" width="300" align="center">
				</el-table-column>
				<el-table-column prop="contactPhone" label="电话" width="200" align="center">
				</el-table-column>
				<el-table-column prop="openingTime" label="开放时间" width="100" align="center">
				</el-table-column>
				<el-table-column prop="closingTime" label="关闭时间" width="100" align="center">
				</el-table-column>
				<el-table-column prop="areaTypeName" label="景区类型" width="80" align="center">
				</el-table-column>
				<el-table-column prop="regionName" label="地区" width="80" align="center">
				</el-table-column>
				<el-table-column prop="longitude" label="经度" width="80" align="center">
				</el-table-column>
				<el-table-column prop="latitude" label="纬度" width="80" align="center">
				</el-table-column>
				<el-table-column align="center" width="250" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" plain size="mini" @click="openEdit(scope.row.scenicId)">修改</el-button>
						<el-button type="success" plain v-if="scope.row.scenicState === 2" size="mini"
							@click="toggleStatus(scope.row.scenicId,-2)">启用</el-button>
						<el-button type="warning" plain v-else-if="scope.row.scenicState === -2" size="mini"
							@click="toggleStatus(scope.row.scenicId,2)">禁用</el-button>
						<el-button type="info" disabled plain v-else-if="scope.row.scenicState === 1"
							size="mini">审核中</el-button>
						<el-button type="warning" plain size="mini"
							@click="deleteScenic(scope.row.scenicId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 分页 -->
		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="searchModel.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="searchModel.pageSize"
				:pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center"
				background>
			</el-pagination>
		</div>
		<!-- 弹出框 -->
		<el-dialog v-el-drag :title="dialogTitle" :visible.sync="dialogVisible" width="75%" @close="handleClose">
			<!-- 弹出框详细内容 -->
			<div>
				<span>景区名称:</span>
				<el-input placeholder="请输入景区名" v-model="scenicName" clearable>
				</el-input>
			</div>
			<div>
				<span>景区描述:</span>
				<el-input type="textarea" :rows="2" placeholder="请输入描述" v-model="description">
				</el-input>
			</div>
			<div>
				<span>景区地址:</span>
				<el-input placeholder="请输入地址" v-model="address" clearable>
				</el-input>
			</div>
			<div>
				<span>联系电话:</span>
				<el-input placeholder="请输入电话" v-model="phone" clearable>
				</el-input>
			</div>
			<div>
				<span>开放关闭时间:</span>
				<el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{
							      start: '08:30',
							      step: '00:15',
							      end: '18:30'
							    }">
				</el-time-select>
				<el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{
							      start: '08:30',
							      step: '00:15',
							      end: '18:30',
							      minTime: startTime
							    }">
				</el-time-select>
			</div>
			<div>
				<span>地区及类型:</span>
				<el-select v-model="region" placeholder="请选择">
					<el-option v-for="item in regions" :key="item.regionId" :label="item.regionName"
						:value="item.regionId">
					</el-option>
				</el-select>
				<el-select v-model="type" placeholder="请选择">
					<el-option v-for="item in types" :key="item.areaTypeId" :label="item.areaTypeName"
						:value="item.areaTypeId">
					</el-option>
				</el-select>
			</div>
			<el-upload class="avatar-uploader" ref="upload" action="/api/scenic/add" :show-file-list="false"
				:auto-upload="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
				:on-change="getFile"
				:data="{'name':scenicName,'description':description,'address':address,'phone':phone,'open':startTime,'close':endTime,'type':type,'region':region,'longitude':0.0000,'latitude':0.0000}">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>

			<!-- 弹出框尾部插槽 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import waves from "@/directives/waves/index.js"
	import ElDrag from "@/directives/ElDrag/index.js"
	import * as scenic from "@/api/scenic"
	export default {
		directives: {
			waves,
			ElDrag
		},
		data() {
			return {
				// 表格加载
				tableLoading: false,
				// 按钮加载
				btnLoading: false,
				// 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
				searchModel: {
					pageNo: 1,
					pageSize: 10,
					name: ''
				},
				// 弹出窗标题
				dialogTitle: '',
				// 弹出窗显示
				dialogVisible: false,
				// 添加 点击的
				// 总条数
				total: 1500,
				// 表单数据
				form: {},
				// 列表数据
				list: [],
				// 表格数据
				tableData: [],
				// 暂存id
				sId: '',
				// 类型集合
				types: [],
				// 区域集合
				regions: [],
				// 景区名称
				scenicName: '',
				// 景区描述
				description: '',
				// 景区地址
				address: '',
				// 联系电话
				phone: '',
				// 开启时间
				startTime: '',
				// 关闭时间
				endTime: '',
				// 所属地区
				region: '',
				// 景区类型
				type: '',
				// 显示图片路径
				imageUrl: '',
				// 经度
				longitude: '',
				// 纬度
				latitude: ''

			}
		},
		methods: {
			// 弹窗关闭触发
			handleClose() {
				console.log("关闭了");
				this.types.splice(0, this.types.length)
				this.regions.splice(0, this.regions.length)
				this.scenicName = ''
				this.description = ''
				this.address = ''
				this.phone = ''
				this.startTime = ''
				this.endTime = ''
				this.region = ''
				this.type = ''
				this.longitude = ''
				this.latitude = ''
				this.imageUrl = ''
				this.sId = ''

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.searchModel.pageSize = val
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.searchModel.pageNo = val
				if (this.searchModel.name) {
					this.queryRequest()
				}
				this.allRequest()
			},
			// 搜索
			search() {
				console.log("这是搜索方法");
				this.queryRequest()
			},
			// 添加和修改都走这里
			openEdit(id) {
				this.typeAndRegions()
				if (id) {
					this.sId = id
					this.dialogTitle = '修改' // 修改
					let info = {
						id: id
					}
					scenic.findInfo(info).then(res => {
						console.log(res)
						this.scenicName = res.data.name
						this.description = res.data.description
						this.address = res.data.address
						this.phone = res.data.contactPhone
						this.startTime = this.convertTimeFormat(res.data.openingTime)
						this.endTime = this.convertTimeFormat(res.data.closingTime)
						// this.region = res.data.regionName
						// this.type = res.data.areaTypeName
					})

				}
				this.dialogVisible = true;
			},

			toggleStatus(id, state) {
				console.log("进行修改");
				let status = {
					id: id,
					state: state
				}
				scenic.stateScenic(status).then(res => {
					console.log(res)
					if (this.searchModel.name) {
						this.queryRequest()
					}
					this.allRequest()
				})
			},
			// 删除
			deleteScenic(id) {
				console.log("进行删除");
				let del = {
					i: id
				}
				scenic.deleteScenic(del).then(res => {
					console.log(res)
					if (this.searchModel.name) {
						this.queryRequest()
					}
					this.allRequest()
				})
			},
			// 搜索请求
			queryRequest() {
				scenic.findQueryScenic(this.searchModel).then(res => {
					this.tableData = res.data.query
					this.total = res.data.total
				})
			},
			// 初始请求
			allRequest() {
				scenic.findAllScenic(this.searchModel).then(res => {
					console.log(res)
					this.tableData = res.data.all
					this.total = res.data.total
				})
			},
			// 清除搜索框
			clearSearch() {
				this.allRequest()
			},
			// 确认
			submit() {
				if (this.sId) {
					// 确认修改
					let update = {
						scenicId: this.sId,
						name: this.scenicName,
						description: this.description,
						address: this.address,
						phone: this.phone,
						open: this.startTime,
						close: this.endTime,
						type: this.type,
						region: this.region,
						longitude: 0.0000,
						latitude: 0.0000
					}
					scenic.updateScenic(update).then(res => {
						console.log(res)
						this.allRequest()
					})
				} else {
					// 确认添加
					this.$refs.upload.submit();
					this.allRequest()
				}

				this.dialogVisible = false
			},
			typeAndRegions() {
				scenic.typeAndRegion().then(res => {
					console.log(res)
					this.regions = res.data.region
					this.types = res.data.type
				})
			},
			handleAvatarSuccess(res, file) {

			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				// const isPNG = file.type === 'image/png';
				// const isLt10M = file.size / 1024 / 1024 < 10;

				// if (!isJPG || !isPNG) {
				// 	this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
				// }
				// if (!isLt10M) {
				// 	this.$message.error('上传头像图片大小不能超过 10MB!');
				// }
				// return isLt10M;
			},
			getFile(file) {
				console.log(file)
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			convertTimeFormat(inputTime) {
				var timeArray = inputTime.split(':');
				if (timeArray.length === 3) {
					return timeArray[0] + ':' + timeArray[1];
				} else {
					return "无效时间！";
				}
			}
		},
		created() {
			this.allRequest()
		}
	}
</script>

<style scoped>
	.dialog-goods-form .title {
		display: inline-block;
		margin-bottom: 15px;
		font-size: 18px;
	}

	.dialog-goods-form .el-input {
		width: 400px;
	}

	.dialog-goods-form .el-select {
		width: 400px;
	}

	.dialog-goods-list {
		height: 350px;
		overflow-y: auto;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>